<section class="content-header">
  <h1>
    分组
    <small>Group panel</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-tags"></i> 主页</a></li>
    <li class="active">分组</li>
  </ol>
</section>

<section class="content">
  <div class="row">
    <section class="col-lg-12 connectedSortable">
      <!-- Custom tabs (Charts with tabs)-->
      <div class="nav-tabs-custom">
        <!-- Tabs within a box -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="javascript:void(0)" data-target="#group-config" data-toggle="tab">分组配置</a></li>
          <li><a href="javascript:void(0)" data-target="#group-info" data-toggle="tab">运行情况</a></li>
          <li><a href="javascript:void(0)" data-target="#group-result" data-toggle="tab">采集结果</a></li>
          <!-- <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li> -->
        </ul>
        <div class="tab-content">
          <!-- 分组配置 -->
          <div class="tab-pane active" id="group-config" style="position: relative;" ng-controller="groupSetCtr">
            <form class="form-horizontal">
              <div class="box-body">

                <div class="form-group">
                  <label for="groupName" class="col-sm-2 control-label">分组名称</label>

                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="groupName" ng-model='group.name' placeholder="分组名称"></div>
                </div>

                <div class="form-group">
                  <label for="selectProject" class="col-sm-2 control-label">选择分组</label>

                  <div class="col-sm-10">
                    <select multiple="multiple" class="form-control" id="selectProject" ng-model="group.projects" ng-options="m.name for m in projects" >
                      <option value="">-- 请选择 --</option>
                    </select>
                  </div>
                </div>
                <div class="form-group" ng-show="group.projects.length">
                  <div class="col-sm-offset-2 col-sm-10">
                    <table class="table table-bordered">
                      <tbody>
                        <tr>
                          <th class="text-center">项目名称</th>
                          <th class="text-center">start_url</th>
                          <th class="text-center">调整优先级</th>
                          <th class="text-center">操作</th>
                        </tr>
                        <tr ng-repeat="project in group.projects">
                          <td class="text-center">{{project.name}}</td>
                          <td class="text-center">start_url。。。</td>
                          <td class="text-center">
                            <span class="label label-info" ng-click="moveUp(project)">上移</span>
                            <span class="label label-info" ng-click="moveDown(project)">下移</span>
                          </td>
                          <td class="text-center">
                            <span class="label label-info" ng-click="showGroup(project)">详情</span>
                            <span class="label label-danger" ng-click="deleteProject(project)">删除</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </form>

            <div class="box-footer text-center">
              <button type="submit" class="btn btn-info" ng-click="groupSetSave(group)"><i class='fa fa-save'></i> 保存</button>
            </div>
          </div>

          <!-- 运行情况 -->
          <div class="tab-pane" id="group-info" style="position: relative;" ng-controller="groupInfoCtrl">
            <div style='margin-bottom: 15px'>
              <button class='btn btn-primary' style='margin-right: 5px' ng-click='run()'>
                <i class='fa fa-play-circle-o'></i> 启动任务</button>
              <!-- <button class='btn btn-danger' ng-click='stop()'><i class='fa fa-pause-circle-o'></i> 暂停</button> -->
              <!-- {{fields.selected}} -->
              <!-- <select multiple="multiple" ng-model='fields.selected'>
                <option ng-repeat='item in fields.all' ng-value='item'>
                  {{item}}
                </option>
              </select> -->
              <ui-select multiple ng-model="fields.selected" theme="bootstrap" close-on-select="false" style='display:inline-block; position:absolute; right: 0; margin-bottom: 5px; width:60%;'>
                <ui-select-match placeholder="选择显示字段">{{$item.length>2?($item|limitTo:2)+'..':$item }}</ui-select-match>
                <ui-select-choices repeat='field in fields.all'>
                  {{field}}
                </ui-select-choices>
              </ui-select>
              <!-- {{fields.selected}} -->
            </div>
            <!-- box -->
            <div class="box" ng-repeat='group in groups' ng-init='outerIndex=$index'>
              <div class="box-header">
                <h5 class="box-title">{{group.status}}</h5>
                <div class="box-tools">
                  <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <div class="box-body no-padding">
                <table class="table">
                  <tr>
                    <th ng-repeat='field in fields.selected'>
                      {{field}}
                    </th>

                  </tr>
                  <tr ng-repeat="project in group.projectInfo">
                    <td ng-repeat='field in fields.selected'>
                      <span ng-if='outerIndex==0'>
                        <!-- 等待 -->
                        {{project[field]}}
                      </span>
                      <span ng-if='outerIndex==1'>
                        <!-- 运行 -->
                        <span ng-if='field!="状态"'>
                          {{project[field]}}
                        </span>
                        <span ng-if='field=="状态"'>
                          <span ng-if='project[field]>80' class='badge bg-aqua'>{{project[field]}}%</span>
                          <span ng-if='project[field]<=80&&project[field]>20' class='badge bg-yellow'>{{project[field]}}%</span>
                          <span ng-if='project[field]<=20' class='badge bg-red'>{{project[field]}}%</span>
                        </span>
                      </span>
                      <span ng-if='outerIndex==2'>
                        <!-- 完成 -->
                        <span ng-if='field!="状态"'>
                          {{project[field]}}
                        </span>
                      </span>
                      <span ng-if='field=="状态"'>
                        <span class='label label-warning' ng-show='project[field]=="取消"'>已取消</span>
                        <span class='label label-default' ng-show='project[field]=="完成"'>已完成</span>
                      </span>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          <!-- box -->
          </div>

          <!-- 运行结果 -->
          <div class="chart tab-pane" id="group-result" style="position: relative;">
            运行结果
          </div>
        </div>
      </div>
      <!-- /.nav-tabs-custom -->
    </section>
  </div>
</section>
